<template>
  <div>
    <Upload
        multiple
        type="drag"
        name="avatar"
        :action="getUrl">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>Click or drag files here to upload</p>
        </div>
    </Upload>

  <Button type="primary"  style="margin-bottom:20px" >添加</Button>
  <Button type="error"  style="margin-bottom:20px" >删除选中</Button>
  <Row>
        <Col span="4">
         
        </Col>
        <Col span="20">
            

            <Table border ref="selection" :columns="columns7" :data="data6"></Table>
        
            <Page :total="filter.total" show-sizer :page-size-opts="filter.pagesize" :page-size="filter.limit" @on-change="onChangeHandler" @on-page-size-change="onPageSizeChangeHandler"></Page>
          
        </Col>
    </Row>
  </div>
</template>
<script>
  export default {
        data () {
           
            return {
                filter:{
                    total:0,
                    page:1,
                    limit:5,
                    pagesize:[5,10,15,20],
                    name:'',
                    title:'',
                    cateId:null
                },
                name:'',
                title:'',
                ids:[],
                modules:'album',
                requestURL:`http://localhost:3000/album/uploadFile`,
                columns7: [
                   {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Filename',
                        key: 'filename'
                    },
                    {
                        title: 'Fieldname',
                        key: 'fieldname'
                    },
                    
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {

                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                           console.log(params.row.filename)
                                           location.href=`http://localhost:3000/${params.row.filename}`
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data6: [
                   
                ],
               
            }
        },
        methods: {
            getData(){
            var bodyString = JSON.stringify(this.filter);
            fetch('http://localhost:3000/album/list',{
                method:'post',
                headers:{   
                    'Content-Type':'application/json'
                },
                body:bodyString
            })
            .then((res) => {
                return res.json();
            })
            .then((data) => {
                for(var i=0;i<data.rows.length;i++){
                    data.rows[i].comment = '';
               }
               
                this.data6 = data.rows;
                this.filter.total=data.total
                
           });
        },
            show (index) {
                // this.$Modal.info({
                //     title: 'Album Info',
                //     content: `Name：${this.data6[index].filename}<br>Age：${this.data6[index].fieldname}`
                // })
                // console.log(index)
                
            },
            remove (id) {
                 this.$Modal.confirm({
                    title: '',
                    content: '确定删除该条信息吗?',
                    onOk:() => {
                        
                        fetch(`http://localhost:3000/album/data/${id}`,{
                            method:'delete',
                            headers:(
                                {
                                'Content-Type':'application/json',
                                }
                            ),
                            body:JSON.stringify({"_id":id})
                        })
                        .then(
                            res=>{
                                return res.json()
                            }
                        )
                        .then(
                            data=>{
                                
                                this.$Message.info('数据已经删除成功');
                                this.getData();
                                
                            }
                        )
                    }
                });
        
            },
            onChangeHandler(page){
                this.filter.page = page;
                this.getData();
            },
            onPageSizeChangeHandler(limit){
                this.filter.limit = limit;
                this.getData();
            },
           
           

        },
        computed:{
          getUrl(){
              return this.requestURL
          }
        },
        created(){
            this.getData();
        }
    }
</script>
